<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="header">
          <div class="left">
            <el-form ref="form" :model="form" label-width="80px" inline>
              <el-form-item label="关键字">
                <el-input v-model="form.keyword" placeholder="根据文章标题搜索" style="width:200px"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="form.state" placeholder="请选择" style="width:200px">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <el-button type="success" size="mini" icon="el-icon-edit" @click="add">新增技巧</el-button>
          </div>
        </div>
        <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="closable"> </el-alert>
        <div class="table">
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"> </el-table-column>
            <el-table-column prop="title" label="文章标题" width="280"> </el-table-column>
            <el-table-column prop="visits" label="阅读数" width="200"> </el-table-column>
            <el-table-column prop="username" label="录入人" width="200"> </el-table-column>
            <el-table-column label="录入时间" width="220">
              <template slot-scope="scope">
                {{ scope.row.createTime | parseTimeByString }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                {{ scope.row.state | state }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="show(scope.row)">预览</el-button>
                <el-button type="text" @click="updataState(scope.row)" v-if="scope.row.state === 1">禁止</el-button>
                <el-button type="text" @click="updataState(scope.row)" v-else>启动</el-button>
                <el-button type="text" :disabled="scope.row.state === 1" @click="change(scope.row)">修改</el-button>
                <el-button type="text" :disabled="scope.row.state === 1" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="pageSizes"
          :page-size="form.pagesize"
          layout="  prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 添加的对话框 -->
        <el-dialog title="新增文章" :visible="addDialog" width="40%" :before-close="cancle">
          <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="文章标题:" prop="title">
              <el-input v-model="addForm.title" placeholder="请输入文章标签"></el-input>
            </el-form-item>
            <!-- 富文本编辑器 -->
            <el-form-item label="文章内容:" prop="articleBody">
              <quill-editor v-model="addForm.articleBody" :options="editorOption"> </quill-editor>
            </el-form-item>
            <el-form-item label="视频地址:">
              <el-input v-model="addForm.videoURL" placeholder="请输入视频地址"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 预览文章 -->
        <el-dialog title="预览文章" :visible="dialogShow" width="30%" :before-close="cancle">
          <h2>{{ yulan.title }}</h2>
          <div class="showww">
            <span>{{ yulan.createTime | parseTimeByString }}</span>
            <span>{{ yulan.username }}</span>
            <span class="el-icon-view"></span>
            <span>{{ yulan.visits }}</span>
          </div>
          <p v-html="yulan.articleBody" class="showfooter"></p>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as initListApi, add, changeState, update, remove } from '@/api/hmmm/articles.js'
export default {
  data () {
    return {
      form: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: ''
      },
      addForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      addFormRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章标题', trigger: 'blur' }]
      },
      closable: false,
      total: 0,
      list: [],
      pageSizes: [2, 3, 5, 10],
      // 添加对话框
      addDialog: false,
      // 预览对话框
      dialogShow: false,
      yulan: '',
      // 富文本编辑器工具栏
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ indent: '-1' }, { indent: '+1' }],
            ['blockquote', 'code-block'], // 引用  代码块
            ['link', 'image', 'video'] // 链接、图片、视频
          ] // 工具菜单栏配置
        }
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const aa = Object.keys(this.form).filter(item => {
        return this.form[item] !== ''
      })
      const newForm = {}
      aa.forEach(item => {
        newForm[item] = this.form[item]
      })
      const { data: res } = await initListApi(newForm)
      this.total = res.counts
      this.list = res.items
    },
    clear () {
      this.form = {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: ''
      }
    },
    search () {
      this.getList()
      this.clear()
    },
    handleSizeChange (size) {
      this.form.pagesize = size
      this.form.page = 1
      this.getList()
    },
    handleCurrentChange (page) {
      this.form.page = page
      this.getList()
    },
    // 新增文章(打开弹窗)
    add () {
      this.addDialog = true
    },
    // 取消
    cancle () {
      this.addDialog = false
      this.dialogShow = false
    },
    // 确认
    submit () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请检查必填项')
        if (this.addForm.id) {
          await update(this.addForm)
          this.$message.success('修改成功')
        } else {
          await add(this.addForm)
          this.$message.success('添加成功')
        }
        this.getList()
        this.addDialog = false
      })
    },
    // 预览
    show (row) {
      this.dialogShow = true
      this.yulan = row
      console.log(row)
    },
    // 修改状态
    async updataState (row) {
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      await changeState(row)
      this.$message.success('操作成功')
    },
    // 修改
    change (row) {
      this.addDialog = true
      this.addForm = { ...row }
      console.log(row)
    },
    // 删除功能
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(err => err)
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.table {
  margin-top: 20px;
}
::v-deep .el-pagination {
  text-align: right;
}
::v-deep .ql-editor {
  height: 180px;
}
.footer {
  text-align: right;
}
.showww {
  span {
    margin-left: 5px;
  }
}
.showfooter {
  height: 65px;
  background-color: #f5f5f5;
  line-height: 40px;
  border-top: 1px dashed #ccc;
}
</style>
